:root {
  --bg: #f0dae1;
  --pink: #c55b79;
  --bright-pink: #9e7eba;
  --fg: #633240;
  --dark-fg: #1d1b1c;
  --shadow: 0px 10px 60px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0px 10px 60px rgba(0, 0, 0, 0.486);
  --gradient: linear-gradient(150deg, var(--pink) 40%, var(--bright-pink) 72%);
}

body {
  margin: 0;
  background-color: var(--bg);
}

* {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
}

pre,
code,
pre *,
code * {
  font-family: 'Fira Code', 'Inconsolata', 'Iosevka', monospace !important;
}

body,
html {
  height: 100%;
}

nav {
  background-color: var(--bg);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  display: flex;
  justify-content: space-evenly;
}

nav a {
  color: var(--pink);
}

nav a:hover {
  color: var(--bright-pink);
}

footer {
  padding: 3rem;
  padding-bottom: 6rem;
  display: flex;
  justify-content: space-between;
}

pre {
  font-size: calc(0.75rem + 0.1vw);
  color: var(--bg);
  background-color: #42192e;
}

blockquote {
  margin: 0;
  padding: 1rem;
  font-style: italic;
  background: #d1c6c6;
}

button:hover {
  cursor: pointer;
}

ul {
  padding-left: 1rem;
}
